<!-- 在monitor.html中 -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Monitor</title>
    <meta content="" name="descriptison">
    <meta content="" name="keywords">
    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="static/assets/img/favicon.png" rel="icon">
    <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900"
          rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
    <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <!--    <link href="static/assets/vendor/animate/css/animate.min.css" rel="stylesheet">-->
    <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
    <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="static/assets/css/style.css" rel="stylesheet">

</head>
<body>
<!-- ======= Header ======= -->
<header id="header">
    <div class="container">

        <div class="logo float-left">
            <h1 class="text-light"><a href="index.html"><span>豆瓣电影</span></a></h1>
            <!-- Uncomment below if you prefer to use an image logo -->
            <!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
        </div>

        <nav class="nav-menu float-right d-none d-lg-block">
            <ul>
                <li><a href="/index">首页</a></li>
                <li><a href="/movie">电影</a></li>
                <li><a href="/score">评分</a></li>
                <li><a href="/word">词云</a></li>
                <li class="active"><a href="/monitor">折线图 <i class="la la-angle-down"></i></a></li>

            </ul>
        </nav><!-- .nav-menu -->
    </div>
</header><!-- End Header -->
<canvas id="crawlerStatusChart"></canvas>
<canvas id="crawlerStatusChartReq"></canvas>
<script>
    var chart;
    var chart_req;
    // 初始化图表
    function initChart(ctx, lyx, labels, datasets,datasets_req) {
        chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'minute', // 确保这是你想要的时间单位
                            displayFormats: {
                                minute: 'HH:mm'
                            },
                            // 如果你的数据点间隔不是固定的，你可以使用以下配置来帮助 Chart.js 渲染
                            round: 'minute',
                            distribution: 'series'
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            display: false
                        }
                    }]
                },
                maintainAspectRatio: true // 如果你想要图表填充整个画布，可以设置为 false
            }
        })
        chart_req = new Chart(lyx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets_req
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'minute', // 确保这是你想要的时间单位
                            displayFormats: {
                                minute: 'HH:mm'
                            },
                            // 如果你的数据点间隔不是固定的，你可以使用以下配置来帮助 Chart.js 渲染
                            round: 'minute',
                            distribution: 'series'
                        }
                    }],
                    y: [{
                        ticks: {
                            beginAtZero: true,
                            display: false
                        }
                    }]
                },
                maintainAspectRatio: true // 如果你想要图表填充整个画布，可以设置为 false
            }
        });
    }


    // 更新图表数据
    function updateChart(newLabels, newDatasets) {
        // 移除旧的时间标签和数据点
        while (chart.data.labels.length > 0) {
            chart.data.labels.pop();
            for (var i = 0; i < chart.data.datasets.length; i++) {
                chart.data.datasets[i].data.pop();
            }
        }

        // 添加新的时间标签和数据点
        for (var i = 0; i < newLabels.length; i++) {
            chart.data.labels.push(newLabels[i]);
            for (var j = 0; j < newDatasets.length; j++) {
                chart.data.datasets[j].data.push(newDatasets[j].data[i]);
            }
        }
<!--        chart.options.scales.yAxes[0].ticks.display = false;-->
        // 更新图表
        chart.update();
    }

    function updateChartReq(newLabels, newDatasets) {
        // 移除旧的时间标签和数据点
        while (chart_req.data.labels.length > 0) {
            chart_req.data.labels.pop();
            for (var i = 0; i < chart_req.data.datasets.length; i++) {
                chart_req.data.datasets[i].data.pop();
            }
        }

        // 添加新的时间标签和数据点
        for (var i = 0; i < newLabels.length; i++) {
            chart_req.data.labels.push(newLabels[i]);
            for (var j = 0; j < newDatasets.length; j++) {
                chart_req.data.datasets[j].data.push(newDatasets[j].data[i]);
            }
        }
<!--        chart.options.scales.yAxes[0].ticks.display = false;-->
        // 更新图表
        chart_req.update();
    }

    // 页面加载完成后，初始化图表
    window.onload = function() {
        var ctx = document.getElementById('crawlerStatusChart').getContext('2d');
        var lyx = document.getElementById('crawlerStatusChartReq').getContext('2d');
        var labels = []; // 初始标签为空
        var datasets = [ // 初始数据集为空
            {label: 'Bytes Downloaded per 10 seconds', data: []}
        ];
        var datasets_req = [
            {label: 'Responses per 10 seconds', data: []}
        ];
        initChart(ctx,lyx, labels, datasets,datasets_req);

        // 设置定时器，每10秒请求一次数据
        setInterval(function() {
            fetch('/get-real-time-data-v2') // 修改这里的路由
                .then(response => response.json())
                .then(data => {
                    // 假设返回的数据格式为 { labels: [], datasets: [{}, {}] }
                    updateChart(data.labels, data.datasets);
                })
        }, 5000); // 10000毫秒 = 10秒
        setInterval(function() {
            fetch('/get-real-time-data-v1') // 修改这里的路由
                .then(response => response.json())
                .then(data => {
                    updateChartReq(data.labels, data.datasets);
                })
        }, 5000);
    };

</script>


<!-- ======= Footer ======= -->
<footer id="footer">
    <div class="container">
        <div class="copyright">计网大作业<a target="_blank" href="http://sc.chinaz.com/moban/"></a></div>
        <div class="credits"></div>
    </div>
</footer><!-- End Footer -->


<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

<!-- Vendor JS Files -->
<script src="static/assets/vendor/jquery/jquery.min.js"></script>
<script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<!--<script src="static/assets/vendor/php-email-form/validate.js"></script>-->
<script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
<script src="static/assets/vendor/venobox/venobox.min.js"></script>
<script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="static/assets/vendor/counterup/counterup.min.js"></script>
<script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="static/assets/vendor/aos/aos.js"></script>

<!-- Template Main JS File -->
<script src="static/assets/js/main.js"></script>

</body>
</html>